<template>
    <div class="menu-tabs-container">
        <div class="menu-tabs">
            <div class="menu-tab" :class="{ 'active': tabActive === 'PC' }" @click="handleTabClick('PC')">电脑端页面</div>
            <div class="menu-tab" :class="{ 'active': tabActive === 'H5' }" @click="handleTabClick('H5')">手机端页面</div>
            <div class="menu-tab" :class="{ 'active': tabActive === 'MGR' }" @click="handleTabClick('MGR')">后台管理页面</div>
        </div>
        <div class="menu-tab-panel">
            <menus-core :tty="tty" :app-id="appId"></menus-core>
        </div>
    </div>
</template>

<script>
import menusCore from './menus-core';

export default {
    props: [ 'appId' ],
    data() {
        return {
            tabActive: 'MGR',
            tty: 1
        }
    },
    components: {
        menusCore
    },
    created () {
        // this.pid = this.$route.query.pid;
    },
    mounted () {
        this.init();
    },
    watch: {

    },
    filters: {

    },
    computed: {

    },
    methods: {
        init() {

        },
        handleTabClick(tab) {
            this.tabActive = tab;

            let tty = 1;
            if(tab ==='PC') {
                tty = 3;
            } else if(tab === 'H5') {
                tty = 2;
            }

            this.tty = tty;
        }
    }
}
</script>